/* eslint-disable no-unused-vars */
import React, { memo } from "react";
import { View, Image, Text } from "@tarojs/components";
import "./index.less";

const Index = (props) => {
    const { data } = props;
    return (
        <View className='list-item'>
            <Image src={data.image} lazyLoad={true} style={{ height: data.height }} />
            <View className='card-info'>
                <View className='title'>
                    <View className='ibl'>
                        <Text>{data.title}</Text>
                    </View>
                </View>
                <View className='thumb-score'>
                    <Text>{data.thumbs}人点赞</Text>
                    <Text>{data.score !== 0 ? data.score : '暂无评'}分</Text>
                </View>
                <View className='cats'>
                    {data.cats.map((item, index) => {
                        if (index < 4) {
                            return (
                                <Text className='tag'>
                                    {item}
                                </Text>
                            )
                        }
                    })}
                </View>
            </View>
        </View>
    );
};

export default memo(Index);
